<template>
  <div class="login-phone">
    <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
      <el-form-item label="手机号">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="ruleForm.code"></el-input>
        <el-button type="primary" class="code">获取验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"> 登陆 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { ElForm } from 'element-plus'
export default defineComponent({
  name: 'LoginPhone',
  setup () {
    const ruleForm = reactive({
      phone: '',
      code: ''
    })
    const ruleFormRef = ref<InstanceType<typeof ElForm>>()
    return {
      ruleForm,
      ruleFormRef
    }
  }
})
</script>

<style scoped lang="less">
:deep(.el-form-item__content) {
  display: flex;
}
:deep(.el-button--primary) {
  width: 100%;
}
.code {
  width: 40% !important;
}
:deep(.el-checkbox:last-of-type) {
  margin-left: 205px;
}
</style>
